<template>
  <div>
    <section class="MaxCon">
      <div class="imgBlock">
        <img
          mode="widthFix"
          src="http://uat.mumway.com/baiduApp/img/back.jpg"
          background-size="cover"
        >
      </div>
      <div class="indexForm">
        <img
          mode="widthFix"
          src="http://uat.mumway.com/baiduApp/img/back-01.jpg"
          background-size="cover"
        >
        <div class="form">
          <img
            class="indexGif"
            src="http://uat.mumway.com/baiduApp/img/ind.gif"
            background-size="cover"
          >

          <div class="picker">
            <picker
              mode="selector"
              :range="types"
              range-key="name"
              @change="pickerChange('work_type',$event)"
            >{{work_type}}</picker>
          </div>
          <div class="picker">
            <picker :range="citys" range-key="name" @change="pickerChange('city',$event)">{{city}}</picker>
          </div>
          <div class="picker">
            <picker mode="date" @change="pickerChange('expected_date',$event)">{{expected_date}}</picker>
          </div>
          <input type="number" v-model="row.phone" placeholder="请输入您的手机号码，报价将发送到您手机">
          
          <span class="btn" @click="submitFun">立即计算</span>

          <swiper
            class="swiperCn"
            vertical
            circular
            :autoplay="true"
            :interval="1000"
            :duration="500"
          >
            <block v-for="(item, index) in textList" :key="index">
              <swiper-item>
                <div class="slide">{{item}}</div>
              </swiper-item>
            </block>
          </swiper>
        </div>
      </div>

      <div class="imgBlock">
        <img mode="widthFix" src="http://uat.mumway.com/baiduApp/img/back-02.jpg">
      </div>
    </section>

    <footer id="footerCon">
      <!-- <button open-type="contact" class="one" @contact="handleContact">
        <i class="iconfont">&#xe62e;</i>在线咨询
      </button>-->
      <span @click="call" class="one">
        <i class="iconfont">&#xe6a9;</i>电话咨询
      </span>
      <span class="two" @click="pageScrollTo">
        <i class="iconfont">&#xe630;</i>免费报价
      </span>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      work_type: "阿姨类别",
      city: "所在城市",
      expected_date: "预产期/宝宝生日",
      row: {
        work_type: "",
        city: "",
        phone: "",
        expected_date: "",
        source_url: "http://bjm.mumway.com/index.html?sem_bdxcx"
      },
      types: [{ value: 1, name: "月嫂" }, { value: 2, name: "育儿嫂" }],
      citys: [
        { value: "bj", name: "北京" },
        { value: "tj", name: "天津" },
        { value: "qd", name: "青岛" },
        { value: "gz", name: "广州" },
        { value: "sz", name: "深圳" },
        { value: "cs", name: "长沙" },
        { value: "ty", name: "太原" },
        { value: "fz", name: "福州" },
        { value: "wh", name: "武汉" },
        { value: "km", name: "昆明" },
        { value: "cd", name: "成都" },
        { value: "xa", name: "西安" },
        { value: "hz", name: "杭州" }
      ],
      textList: [
        "杨女士 155****5903 刚刚 获得报价结果",
        "王先生 135****6327 1分钟前 获得报价结果",
        "毛女士 185****5913 2分钟前 获得报价结果",
        "刘女士 155****7903 3分钟前 获得报价结果",
        "牛女士 187****1323 1分钟前 获得报价结果",
        "张先生 155****1023 1分钟前 获得报价结果",
        "姜女士 152****3480 2分钟前 获得报价结果",
        "赵女士 155****7480 1分钟前 获得报价结果",
        "杨纹    150****9076 5分钟前 获得报价结果",
        "钱小姐 130****4278 1分钟前 获得报价结果",
        "任女士 185****9418 5分钟前 获得报价结果"
      ]
    };
  },

  methods: {
    handleContact(e) {
      console.log(e);
    },
    pageScrollTo() {
      mpvue.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },
    call() {
      mpvue.reportAnalytics("call");
      mpvue.makePhoneCall({
        phoneNumber: "400-0098-566"
      });
    },
    pickerChange(key, event) {
      console.log(key);
      console.log(event.target.value);
      switch (key) {
        case "expected_date":
          this.row[key] = event.target.value;
          this[key] = event.target.value;

          break;
        case "work_type":
          this.row[key] = this.types[event.target.value].name;
          this[key] = this.types[event.target.value].name;

          break;
        case "city":
          this.row[key] = this.citys[event.target.value].name;
          this[key] = this.citys[event.target.value].name;
          break;
      }
    },
    verification() {
      if (this.row.work_type) {
        if (this.row.city) {
          if (this.row.expected_date) {
            if (this.row.phone.length == 11) {
              return true;
            } else {
              this.$toastr.msg("请填写正确的手机号码");
              return false;
            }
          } else {
            this.$toastr.msg("请选择预产期/宝宝生日");
            return false;
          }
        } else {
          this.$toastr.msg("请选择所在城市");
          return false;
        }
      } else {
        this.$toastr.msg("请选择阿姨类别");
        return false;
      }
    },
    submitFun() {
      if (this.verification()) {
        this.$http.post("index/activity/addServiceOffers", this.row, res => {
          if (res.success) {
            mpvue.reportAnalytics("submit");
            mpvue.showModal({
              title: "提示",
              content:
                "为了给您更精准的报价，我们的母婴顾问会第一时间为您查询阿姨资料，并免费提供人工报价！并赠送您北京地区800元月嫂抵用券。感谢您的信任！",
              showCancel: false,
              confirmColor: "#0099cc",
              success: function(res) {}
            });
          } else {
            this.$toastr.msg(res.msg);
          }
        });
      }
    }
  },

  created() {
    mpvue.setMetaDescription &&
      mpvue.setMetaDescription({
        content: "信息描述:好孕妈妈 月嫂咨询",
        success: function(res) {
          console.log("设置成功");
        },
        fail: function(res) {
          console.log("设置失败");
        },
        complete: function(res) {
          console.log("设置完成");
        }
      });

    mpvue.setMetaKeywords &&
      mpvue.setMetaKeywords({
        content: "好孕妈妈, 月嫂咨询, ",
        success: function(res) {
          console.log("设置成功");
        },
        fail: function(res) {
          console.log("设置失败");
        },
        complete: function(res) {
          console.log("设置完成");
        }
      });

    mpvue.setDocumentTitle &&
      mpvue.setDocumentTitle({
        title: "好孕妈妈服务报价"
      });
  }
};
</script>

<style scoped lang="scss">
@keyframes opacityChange {
  0% {
    opacity: 1;
  }
  1% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.2;
  }
  51% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes opacityChangeColor {
  0% {
    background-color: #ffa3a3;
  }
  1% {
    background-color: #f94f4f;
  }
  50% {
    background-color: #f94f4f;
  }
  51% {
    background-color: #ffa3a3;
  }
  100% {
    background-color: #ffa3a3;
  }
}

@keyframes yaoyaoHan {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.yaoyaoHanS {
  animation: yaoyaoHan 0.7s infinite;
}

@mixin animetStyle {
  animation: opacityChangeColor 1s infinite;
}
@mixin clearfloat {
  zoom: 1;
  &:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
  }
}

@mixin line-clamp($line) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  word-break: break-all;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

.opacityChangeCl {
  animation: opacityChange 0.7s infinite;

  i {
    color: #ff6262;
    font-size: 40px;
  }
}

$themeColor: #ff8484;

.imgBlock {
  width: 100%;
  img {
    width: 100%;
  }
}
footer#footerCon {
  width: 750px;
  height: 110px;
  background-color: #fff;
  position: fixed;
  bottom: -1px;
  left: 0;
  z-index: 99;
  button,
  span {
    width: 50%;
    display: block;
    float: left;
    text-align: center;
    line-height: 108px;
    height: 100%;
    font-size: 28px;
    border-radius: 0;
    i {
      font-size: 40px;
      color: #fff;
      margin-right: 6px;
      line-height: 108px;
    }
  }
  .one {
    // width: 200px;
    color: #fff;
    background-color: #f7b053;
  }
  // .one:nth-child(1) {
  //   position: relative;
  //   &:after {
  //     content: "";
  //     position: absolute;
  //     height: 90px;
  //     width: 1px;
  //     top: 10px;
  //     right: 0;
  //     background-color: #fff;
  //   }
  // }

  .two {
    // width: 350px;
    background-color: #ec6c69;
    color: #fff;
  }
}

.MaxCon {
  width: 750px;
  position: relative;
  padding-bottom: 100px;
  background-color: #f2f2f2;
}

div.form {
  position: absolute;
  top: 85px;
  left: 0;
  z-index: 2;
  width: 100%;
  padding: 135px 65px 0;

  .indexGif {
    position: absolute;
    top: 10px;
    right: 110px;
    width: 200px;
    height: 96px;
  }

  .picker,
  span.btn,
  input[type="number"] {
    margin-top: 25px;
    width: 100%;
    height: 93px;
    line-height: 93px;
    border-radius: 16px;
    background-color: #eeeeee;
    border: 0;
    padding-left: 30px;
    font-size: 26px;
    color: #666;
  }

  input[type="number"] {
    background-color: #fff;
    border: 1px solid #f00;
  }

  span.btn {
    display: block;
    height: 82px;
    line-height: 82px;
    background-color: #ffa3a3;
    color: #fff;
    font-size: 34px;
    margin-top: 20px;
    @include animetStyle;
    text-align: center;
  }
}

div.indexForm {
  width: 100%;
  position: relative;
  > img {
    width: 100%;
  }
}

.swiperCn {
  width: 100%;
  height: 40px;
  margin-top: 30px;
  font-size: 26px;
  text-align: center;
}
</style>
